html,
body,
#viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

.toc-container{
    padding:8px;
    position:absolute;
    top:16px;
    left:16px;
    background-color: rgba(0,0,0,0.4);
    width:200px;
    height:720px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    color:#fff;
}

.select-mode-container{
    display: flex;
    flex-direction: row;
}

.map-layer-container{
    display: flex;
    flex-direction: column;
}

.map-layer-group-title{
    margin-top: 8px;
}

.baseMap{
    position: fixed;
    bottom: 5%;
    right: 3%;
}
.baseMapContainter{
    width: 86px;
    height: 52px;
    cursor: pointer;
    border: 2px solid rgba(55, 133, 223,0);
    
    position: relative;
}
.baseMapContainter:hover{
    cursor: pointer;
    border: 2px solid rgba(102, 102, 102, 0.90);
}
.baseMap_img{
    height: 52px;
    background: linear-gradient(#03f0ff, #03f0ff) left top,
    linear-gradient(#03f0ff, #03f0ff) left top,
    linear-gradient(#03f0ff, #03f0ff) right top,
    linear-gradient(#03f0ff, #03f0ff) right top,
    linear-gradient(#03f0ff, #03f0ff) left bottom,
    linear-gradient(#03f0ff, #03f0ff) left bottom,
    linear-gradient(#03f0ff, #03f0ff) right bottom,
    linear-gradient(#03f0ff, #03f0ff) right bottom;
    background-repeat: no-repeat;
    background-size: 2px 20px, 20px 2px;
    padding: 22px;
    position: absolute;
    top: -45%;
    right: 120%;
    overflow: hidden;
}
.baseMap_panl{
    position: relative;
    height: 92px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.baseMap_panl img{
    width: 86px;
    height: 52px;
    margin-right: 20px;
    border: 2px solid rgba(252, 255, 255,0);
}
.baseMap_panl img:hover{
    cursor: pointer;
    border: 2px solid rgba(102, 102, 102, 0.90);
}
.baseMap_panl img:last-child{
    margin-right: 0px;
}
.animation_show{
    opacity: 1;
    transition: 0.5s all ease-in;
    animation: anm_show 1s;
}
.animation_hiden{
    opacity: 0;
    transition: 0.5s all ease-in;
    animation: anm_hiden 1s;
}
@keyframes anm_show{
    0%{
        width: 0;
    }
    100%{
        width: 310px;
    }
}
@keyframes anm_hiden{
    0%{
        width: 310px;
    }
    100%{
        width: 0;
    }
}
.changeImage{
    width: 86px;
    height: 52px;
}

.aside{
    position: fixed;
    top: 10%;
    right: 3%;
}
.aside-containter{
    width: 51px;
}
.aside-item{
    width: 51px;
    height: 51px;
    background: #ffffff;
    color: rgba(102, 102, 102, 0.90);
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aside-item:hover{
    cursor: pointer;
    color: #ffffff;
    background: rgba(102, 102, 102, 0.90)
}
.content_wrap{
    position: fixed;
    top: 8%;
    right: 8%;
    width: 300px;
    height: 444px;
    /* background: red; */
}

.mapLayer{
    /* width: 300px; */
    height: 200px;
    background: yellow;
    overflow-y: auto;
    overflow-x: hidden;
}
.mapLayer-box{
    width: 300px;
    height: 1200px;
    background: white;
}

.query{
    width: 300px;
    height: 200px;
    background: pink;
}

.mapLayerQuery{
    width: 300px;
    height: 200px;
    background: orange;
}

.measure{
    width: 300px;
    height: 200px;
    background: lightblue;
}
.aside_show{
    opacity: 1;
    transition: 0.5s all linear;
    animation: side_show 0.5s;
}
.aside_hiden{
    opacity: 0;
    transition: 0.5s all linear;
    animation: side_hiden 0.5s;
}
@keyframes side_show{
    0%{
        width: 0;
    }
    100%{
        width: 300px;
    }
}
@keyframes side_hiden{
    0%{
        width: 300px;
    }
    100%{
        width: 0;
    }
}